<form method="post" class="searchForm-container">

    <div class="search-form-fieldset">
        <button class="searchForm-action-button-default">
            <i class="fa fa-search"></i>
        </button>
        <input
            type="search"
            placeholder-translate="Search messages"
            placeholder-translate-context="Placeholder search"
            autocomplete="off"
            ng-model="query"
            class="search-form-fieldset-input placeholder-white no-outline">
        <btn-advanced-search
            pt-tooltip-translate-context="Action"
            pt-tooltip-translate="Advanced search"
            pt-placement="bottom" class="searchForm-action-button-toggle"></btn-advanced-search>
        <btn-advanced-search
            data-action="close"
            class="searchForm-action-button-advanced"></btn-advanced-search>
    </div>

    <div class="searchForm-advanced-container pm_form pm_grid" ng-if="advancedSearch">
        <section class="searchForm-advanced-main">
                <div class="searchForm-advanced-keywords-container row">
                    <input
                        id="search_keywords"
                        class="searchForm-advanced-keywords-input"
                        type="text"
                        placeholder-translate="Keywords"
                        placeholder-translate-context="Placeholder search"
                        ng-model="model.keyword">
                </div>
                <div class="row">
                    <label class="searchForm-advanced-wildcard-container">
                        <custom-checkbox data-custom-ng-model="model.wildcard"></custom-checkbox>
                        <span
                            translate-context="Info"
                            translate>Do not require exact match</span>
                        <a href="https://protonmail.com/support/knowledge-base/search/" target="_blank" class="text-purple">
                            <i class="fa fa-info-circle"></i>
                        </a>
                    </label>
                </div>
        </section>

        <div class="searchForm-advanced-wrapper">
            <div class="row">
                <label for="search_folder" translate translate-context="Title">Location</label>
                <span class="pm_select">
                    <select
                        id="search_folder"
                        ng-model="model.folder"
                        ng-options="folder.label group by folder.group for folder in folders"></select>
                    <i class="fa fa-angle-down"></i>
                </span>
            </di>
            <div class="row margin">
                <div class="col-1-2">
                    <label for="search_sender" translate translate-context="Title">Sender</label>
                    <autocomplete-email
                        class="searchForm-autocomplete"
                        data-email="model.from"
                        data-custom-id="search_sender"
                        data-custom-placeholder="{{'From' | translate:'Title'}}"></autocomplete-email>
                </div>
                <div class="col-1-2">
                    <label for="search_recipient" translate translate-context="Title">Recipient</label>
                    <autocomplete-email
                        class="searchForm-autocomplete"
                        data-email="model.to"
                        data-custom-id="search_recipient"
                        data-custom-placeholder="{{'To' | translate:'Title'}}"></autocomplete-email>
                </div>
            </div>
            <div class="row margin">
                <div class="col-1-2">
                    <label for="search_start" translate translate-context="Title">Start date</label>
                    <span class="input-icon">
                        <em class="fa fa-calendar searchForm-icon"></em>

                        <input
                            class="search-date"
                            type="text"
                            data-pikaday
                            autocomplete="off"
                            ng-model="model.begin"
                            data-default-date="{{::model.beginRaw}}"
                            data-max-date="model.end"
                            id="search_start">
                    </span>
                </div>
                <div class="col-1-2">
                    <label for="search_end" translate translate-context="Title">End date</label>
                    <span class="input-icon">
                        <em class="fa fa-calendar searchForm-icon"></em>
                        <input
                            class="search-date"
                            type="text"
                            data-pikaday
                            autocomplete="off"
                            ng-model="model.end"
                            data-default-date="{{::model.endRaw}}"
                            data-min-date="model.begin"
                            id="search_end">
                    </span>
                </div>
            </div>
            <div class="row">
                <div class="col-1-2">
                    <label for="search_address" translate translate-context="Title">Address</label>
                    <span class="pm_select">
                        <select
                            id="search_address"
                            ng-model="model.address"
                            ng-options="address.Email for address in addresses | orderBy: 'Order' track by address.ID"></select>
                        <i class="fa fa-angle-down"></i>
                    </span>
                </div>
                <div class="col-1-2">
                    <label translate translate-context="Title" translate-comment="Search form option heading">Attachments</label>
                    <div class="radio searchFrom-advanced-radio">
                        <label>
                            <custom-radio
                                data-custom-id="attachments_all"
                                data-custom-ng-model="model.attachments"
                                data-custom-value="2"></custom-radio>
                            <span
                                translate
                                translate-context="Search action filter"
                                translate-comment="form option">All</span>
                        </label>
                        <label>
                            <custom-radio
                                data-custom-id="attachments_yes"
                                data-custom-ng-model="model.attachments"
                                data-custom-value="1"></custom-radio>
                            <span
                                translate
                                translate-context="Search action filter"
                                translate-comment="form option">Yes</span>
                        </label>
                        <label>
                            <custom-radio
                                data-custom-id="attachments_no"
                                data-custom-ng-model="model.attachments"
                                data-custom-value="0"></custom-radio>
                            <span
                                translate
                                translate-context="Search action filter"
                                translate-comment="form option">No</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="row margin-top">
                <button type="submit" class="searchForm-advanced-submit pm_button primary">
                    <i class="fa fa-search"></i>
                    <span translate translate-context="Action">Search</span>
                </button>
            </div>
        </div>
    </div>
</form>
